Angular date pipe used to format dates in angular according to the given date formats,timezone and country locale information.

Using date pipe, we can convert a date object, a number (milliseconds from UTC) or an ISO date strings according to given predefined angular date formats or custom angular date formats.

Angular date pipe accpets three parameters

Now we will go through few angular date pipe examples to understand it further.

I have created a date pipe component in my Angular project and added current datetime values in different formats like milliseconds,date object,datetime string,ISO datetime string.

Now in my component I am displaying them using angular date pipe as shown below.

DateTime as Milliseconds : {{todayNumber}} datepipe:{{todayNumber | date}}

DateTime as object : {{todayDate}} datepipe:{{todayDate | date}}

DateTime as string : {{todayString}} datepipe:{{todayString | date}}

DateTime as iso string : {{todayISOString}} datepipe:{{todayISOString | date}}

All types of datetime values displays the date in ‘MMM d, y’ format which is default Angular date format ‘mediumDate’

To change the datetime format in angular we have to pass date time format parameter to the angular pipe as shown below

The format ‘short’ is one of the predefined date formats in angular which converts our date value to ’M/d/yy, h:mm a’ format.

Angular date pipe has 12 predefined date formats as shown in above table.

We have to pass first parameter “format” as quoted string with the predefined date format names listed below.

In addition to the date format we can pass timezone as a parameter to date pipe to display date in particular timezone.

The timezone parameter can be timezone offset (‘0530’) or standard UTC/GMT (IST) or continental US timezone abbreviation.

For example to display to time in IST timezone

To display UTC date and time in Angular we have to pass timezone parameters as ‘UTC’ or timezone offset as ‘+0000’ as shown below

To display date according to country locale format rules, We have to pass country locale code as a third parameter to angular date pipe as shown below.

For example France follows “Central European Summer Time” and it has a timezone offset ‘+0200’.

To display date time in french locale in Angular use locale code ‘fr’ as parameter as shown below

French date time is {{todayDate | date:'full':'+0200':'fr'}}

But the above code returns the error in console saying Missing locale data for the locale “fr”.

In our application we dont have locale information for ‘fr’

To add the country locale information refer Angular currency pipe article

The default date format in Angular is ‘mediumDate’.

What if we want to change it and replace it with our own custom format like ‘EEEE d MMMM y h:mm a’

Which displays time as ‘Wednesday 19 June 2019 8:33 PM’.

In our angular projects, we will be displaying dates very frequently and each time we need to pass the format parameter.

To avoid this We can create our own custom date pipe with the above format, use it across the application as shown below.

To create a custom date pipe follow the below steps

Create a file named custom.datepipe.ts add the below code.

And import CustomDatePipe in app.module.ts and add it in declaration array of AppModule.

Now we can use our custom date pipe in component file as shown below

In addition to the above date time formats,we can define our own custom datetime formats using the below symbols.

For example {{today | date:'GGGG'}} displays the era of time “Anno Domini”

We can combine these symbols to display our own date formats as shown below.